<template>
  <div class="simulationDataChat">
    <el-scrollbar style="width:878px;" :native="false" :noresize="false" ref="scrollDiv">
      <div ref="simulationDataChat" style="height:340px" :style="{width: allData.length > 9 ? allData.length * 100 + 'px' : '878px'}" class="chat"></div>
    </el-scrollbar>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { importSimulationChatData, importSimulationQueryData } from './api/echartsChatApi'
import { simulationOverviewOption } from '../../../../../utils/js/point'
export default {
  components: {
    // 接受父组件传过来的值
    props: {
      parentValue: {
        type: String,
        required: true
      }
    },
  },
  data() {
    return {
      allData: [],
      myChart: null,
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    async chartRender(params) {
      if (params == '全部') {
        this.getData();
      } else {
        const res = await importSimulationQueryData(params)
        this.allData = res.data.data;
        this.$nextTick(_=>{
          this.initChart();
          this.$refs.scrollDiv.update();
        })
      }
    },
    async getData() {
      const res = await importSimulationChatData()
      this.allData = res.data.data;
      this.$nextTick(_=>{
        this.initChart();
        this.$refs.scrollDiv.update();
      })
    },
    initChart() {
      var xAxisData = this.allData.map(item => {return item.segmentation_scene})
      var subcategoryNum = this.allData.map(item => {return item.subcategory_number})
      simulationOverviewOption.xAxis.data = xAxisData;
      simulationOverviewOption.series[0].data = subcategoryNum;
      if(this.myChart){
        this.myChart.dispose();
        this.myChart = null;
      }
      this.myChart = echarts.init(this.$refs.simulationDataChat);
      this.myChart.setOption(simulationOverviewOption);
      // echart图表自适应
      window.addEventListener('resize', function() {
        this.myChart && this.myChart.resize();
      });
    }
  }
}
</script>

<style lang="less">
.simulationDataChat{
  height: 340px;
   &::-webkit-scrollbar {
    height: 17px !important;
   }
  .el-scrollbar__bar{
    left: 0 !important;
    right: 0 !important;  
    .el-scrollbar__thumb{
      border-radius: 2px !important;
    }
  }
  .is-vertical {
    display: none;
  }
}
</style>